Skip to main content

Text alignment settings

In the most outer file of the block, the code below is used to determine the text alignment of the block.

It's important to note that the text alignment should ALWAYS have a default option (section.alignment == 'default'). The default value corresponds with how the block is represented in the design file.

If the CMS user doesn't want to use the default value, they can change it in the block's settings (ACF cloned field group) which most repeatable blocks have. Typically, we only allow CMS users to choose one of the following options:

  • Default (same as either the light or dark option)
  • Center (text in middle)
  • Left (most often used for body text)
  • Right (always never used)

Developers should ensure that the text alignment ALWAYS has a default value. The default value corresponds with either the left, center or right text alignment.

    {#
* Organism State: Text alignment
*
* Manages the (Tailwind) styling CSS classes outputted as a result of the CMS text alignment option for this section.
* Important: The "default" value should force a state that resembles the original design files.
#}

{% if section.alignment == 'left' or section.alignment == 'default' %}

{% set alignment_classes = 'text-left' %}

{% elseif section.alignment == 'center' %}

{% set alignment_classes = 'text-center' %}

{% elseif section.alignment == 'right' %}

{% set alignment_classes = 'text-right' %}

{% endif %}